<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://oss.chathot.me/action/js/loading.js?v=0.153463"></script>
    <script src="https://oss.chathot.me/action/js/vue.min.js?v=0.153463"></script>
    <script src="https://oss.chathot.me/action/mobile_js/mobile_until.js?v=0.153463"></script>
    <link rel="stylesheet" href="https://oss.chathot.me/action/js/var.css?v=0.153463">
    <script src="https://oss.chathot.me/action/mobile_js/request_2.js?v=0.153463"></script>
     <script src="./miss.js?v=0.153463"></script>
     <script src="./miss1.js?v=0.153463"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js?v=0.153463"></script>
    <script>
        vConsole = new VConsole()
    </script>
    <link rel="stylesheet" href="./gratitude.css">
</head>

<body>
    <div class="app" id="app">
        <div class="head"></div>
      
        <div class="task">
            <div class="task-head">
                <div class="task-title">
                    kkkkkkkkkkkkkkkkkkk
                </div>
            </div>
            <div class="task-mide">
                <div class="task-tot">
                    <div class="left">
                        <div class="recabe">RECIBE UN REGALO DE EVENTO DE X PERSONA</div>
                        <div class="progressBar">
                            <div class="progressBarj" :style="{width:scrollBar+'%'}">
                                <div class="progressBarNum">{{numA}}/100</div>
                            </div>
                        </div>
                        <div class="recabe">RECIBE UN REGALO DE EVENTO DE X PERSONA</div>
                        <div class="progressBar">
                            <div class="progressBarj" :style="{width:scrollBarT+'%'}">
                                <div class="progressBarNum">{{numT}}/100</div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="r-img">
                            <img @click='giFl'
                                src="https://oss.chathot.me/action/halloweenDirectory/gratitude/giftBox.png"
                                alt="" style="width: 1.54rem;
        height: 1.54rem;     margin-left: 0.2rem;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="task-foot"></div>
        </div>
        <div class="taT">
            <ul>
                <li :class="{'active':tabT==1}" @click='changeTab(1)'>CLASIFICACIÓN</li>
                <li :class="{'active':tabT==2}" @click='changeTab(2)'>OTORGAR</li>
            </ul>
        </div>
        <div class="countdown">

            <div class="count">
                <div class="left">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/gratitude/right.png"
                        alt="">
                </div>
                <span>{{ time1 }}d</span>
                <span>{{ time2 }}h</span>
                <span>{{ time3 }}m</span>
                <span>{{ time6 }}s</span>
                <div class="right">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/gratitude/left.png"
                        alt="">
                </div>
            </div>
        </div>
        <div class="Regala">
            <div class="Regala-head">
                <div class="Regala-text">
                    <div style="padding-top: 0.2rem;">Regala regalos y gana puntos para</div>
                    <div>participar en el concurso.</div>
                    <div class="Regala-br"> <img
                            src="https://oss.chathot.me/action/halloweenDirectory/gratitude/br.png"
                            alt=""></div>
                </div>
            </div>

            <div class="Regala-mdia">
                <div class="Regala-gil">
                    <div class="Regala-i">
                        <img style="width: 1.99rem;
                    height: 1.61rem;"
                            src="https://oss.chathot.me/action/halloweenDirectory/gratitude/Chick.png"
                            alt="">
                        <div class="Regala-num">
                            <div class="Rnmu">500</div>
                            <img src="https://oss.chathot.me/action/halloweenDirectory/gratitude/gold.png"
                                alt="">

                        </div>
                    </div>
                    <div class="Regala-i">
                        <img style="width: 1.99rem;
                    height: 1.61rem;"
                            src="https://oss.chathot.me/action/halloweenDirectory/gratitude/Dessertbox.png"
                            alt="">
                        <div class="Regala-num">
                            <div class="Rnmu">750</div>
                            <img src="https://oss.chathot.me/action/halloweenDirectory/gratitude/gold.png"
                                alt="">

                        </div>
                    </div>
                    <div class="Regala-i">
                        <img style="width: 1.99rem;
                    height: 1.61rem;"
                            src="https://oss.chathot.me/action/halloweenDirectory/gratitude/Manor.png"
                            alt="">
                        <div class="Regala-num">
                            <div class="Rnmu">1888</div>
                            <img src="https://oss.chathot.me/action/halloweenDirectory/gratitude/gold.png"
                                alt="">

                        </div>
                    </div>
                </div>
            </div>
            <div class="Regala-foot"></div>
        </div>
        <div class="tabs" style="margin-top: 0.5rem ;">
            <ul>
                <li :class="{'actives':tabTs==1}" @click='changeTabs(1)'>
                    <div style="margin-top: .04rem;"> DAR</div>
                    <div> REGALOS</div>
                </li>
                <li :class="{'actives':tabTs==2}" @click='changeTabs(2)'>
                    <div style="margin-top: .04rem;"> RECIBIR</div>
                    <div> REGALOS</div>

                </li>
                <li :class="{'actives':tabTs==3}" @click='changeTabs(3)' style="line-height: .6rem;">
                    POPULARIDAD

                </li>
            </ul>
        </div>
        <div class="dar" v-show='tabTs==1'>
            <div class="dar-head"></div>
            <div class="dar-mdeia">

                <div class="popa" v-for='item in giftList' :key='item.user_id'>
                    <div class="popularMe">
                        <div class="left">
                            <div class='left-num'>{{item.rank}}</div>
                            <div class="left-img" @click='go_user(item.user_id)'>
                                <img :src="item.avatar"
                                    alt="">
                            </div>
                        </div>
                        <div class="central">
                            <div class="central-name" style="overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;">{{item.nickname}}</div>
                            <div class="central-id" style="	font-size: 0.26rem;">ID:{{item.user_no}}</div>

                        </div>
                        <div class="right">
                            <div class="right-num">{{num(item.point)}}</div>

                        </div>
                        <div class="foot"></div>

                    </div>
                    <div style="	width: 6rem;
                    margin-left: .4rem;
     height: 0.01rem;"> <img
                            src="https://oss.chathot.me/action/halloweenDirectory/gratitude/br2.png"
                            alt=""></div>
                </div>
            </div>
            <div class="userfoot" v-if='giftMYlist.length!=0' >
                <div class="left">
                    <div class='left-num' v-if='giftMYlist.rank>30'>30+</div>
                    <div class='left-num' v-else>{{giftMYlist.rank}}</div>
                    <div class="left-img"  @click='go_user(giftMYlist.user_id)'>
                        <img :src="giftMYlist.avatar"
                            alt="">
                    </div>
                </div>
                <div class="central">
                    <div class="central-name" style="overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;">{{giftMYlist.nickname}}</div>
                    <div class="central-id" style="	font-size: 0.26rem;">ID:{{giftMYlist.user_no}}</div>

                </div>
                <div class="right">
                    <div class="right-num">{{num(giftMYlist.point)}}</div>

                </div>
            </div>



        </div>
        <div class="dar" v-show='tabTs==2'>
            <div class="dar-head"></div>
            <div class="dar-mdeia">

                <div class="popa" v-for='item in pickupList' :key='item.user_id'>
                    <div class="popularMe">
                        <div class="left">
                            <div class='left-num'>{{item.rank}}</div>
                            <div class="left-img">
                                <img :src="item.avatar"
                                @click='go_user(item.user_id)'
                                    alt="">
                            </div>
                        </div>
                        <div class="central">
                            <div class="central-name" style="overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;">{{item.nickname}}</div>
                            <div class="central-id" style="	font-size: 0.26rem;">ID:{{item.user_no}}</div>

                        </div>
                        <div class="right">
                            <div class="right-num">{{num(item.point)}}</div>

                        </div>
                        <div class="foot"></div>

                    </div>
                    <div style="	width: 6rem;
                     margin-left: .4rem;
     height: 0.01rem;"> <img
                            src="https://oss.chathot.me/action/halloweenDirectory/gratitude/br2.png"
                            alt=""></div>
                </div>
            </div>
            <div class="userfoot" v-if='pickupMYList.length!=0'>
                <div class="left">
                    <div class='left-num' v-if='pickupMYList.rank>30'>30+</div>
                    <div class='left-num' v-else>{{pickupMYList.rank}}</div>
                    <div class="left-img">
                        <img :src="pickupMYList.avatar"
                        @click='go_user(pickupMYList.user_id)'
                            alt="">
                    </div>
                </div>
                <div class="central">
                    <div class="central-name" style="overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;">{{pickupMYList.nickname}}</div>
                    <div class="central-id" style="	font-size: 0.26rem;">ID:{{pickupMYList.user_no}}</div>

                </div>
                <div class="right">
                    <div class="right-num">{{num(pickupMYList.point)}}</div>

                </div>
            </div>



        </div>
        <div class="dar" v-show='tabTs==3'>
            <div class="dar-head"></div>
            <div class="dar-mdeia">

                <div class="popa" v-for='item in closList' :key='item.user_id'>
                    <div class="popularMe">
                        <div class="left">
                            <div class='left-num'>{{item.rank}}</div>
                            <div class="left-img"   @click='go_user(item.user_id)'>
                                <img :src="item.avatar"
                                    alt="">
                            </div>
                        </div>
                        <div class="central">
                            <div class="central-name" style="overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;">{{item.nickname}}</div>
                            <div class="central-id" style="	font-size: 0.26rem;">ID:{{item.user_no}}</div>

                        </div>
                        <div class="right">
                            <div class="right-num">{{num(item.point)}}</div>

                        </div>
                        <div class="foot"></div>

                    </div>
                    <div style="	width: 6rem;
                     margin-left: .4rem;
     height: 0.01rem;"> <img
                            src="https://oss.chathot.me/action/halloweenDirectory/gratitude/br2.png"
                            alt=""></div>
                </div>
            </div>
            <div class="userfoot" v-if='closMYList.length!=0'>
                <div class="left">
                    <div class='left-num' v-if='closMYList.rank>30'>30+</div>
                    <div class='left-num' v-else>{{closMYList.rank}}</div>
                    <div class="left-img" @click='go_user(closMYList.user_id)'>
                        <img :src="closMYList.avatar"
                            alt="">
                    </div>
                </div>
                <div class="central">
                    <div class="central-name" style="overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;">{{closMYList.nickname}}</div>
                    <div class="central-id" style="	font-size: 0.26rem;">ID:{{closMYList.user_no}}</div>

                </div>
                <div class="right">
                    <div class="right-num">{{num(closMYList.point)}}</div>

                </div>
            </div>



        </div>
        <div class='taNc' v-if='isShow' > 
      <div class="taNCs">
        <div class="taNc-head">
            <div class="taNc-title">22222</div>
            <div class="taNc-close" @click='closeTc'></div>
        </div>
        <div  class="taNc-mide"></div>
        <div  class="taNc-foot"></div>
      </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    isShow:false,
                    tabT: 1,
                    time1: '00',
                    time2: '00',
                    time3: '00',
                    time6: '00',
                    tabTs: 1,
                    token: GetUrlParam('token'),
                // activity_id: environment() ? 0:442,
                user_id: GetUrlParam('user_id'),
                    total: 100,
                    numA: 100,
                    numT: 0,
                    giftList: [
                  
                   
                    ],
                    giftMYlist:'',
                    pickupList:[
                  
                   
                    ],
                    pickupMYList:'',
                    closList:[
              
                   
                    ],
                    closMYList:''
                }
            },
            created(){
            document.title='gratitude'
            },
            computed: {
                scrollBar() {
                    return (this.numA / this.total) * 100
                },
                scrollBarT() {
                    return (this.numT / this.total) * 100
                }
            },
            mounted(){
                   this.$nextTick(()=>{
                    this.getPopular()
                    this.getSend()
                    this.sentiment()
                   this.activeInfo()
                   })
            },
            methods: {
                //跳转进入主页
                go_user(id) {
                console.log(id);
                userDetails(id);
        },
                //收礼
                getPopular() {
                    console.log('id:', this.user_id, '---token:', this.token)
                    let query = {
                        user_id: this.user_id,
                        user_token: this.token,
                        type: 2,
                    };
                    return ajax2("GET", query, {}, "api/ThanksgivingDay/giftRank")
                        .then((res) => {
                            console.log(res);
                            this.giftList=res.data.list
                            this.giftMYlist=res.data.my_rank_data
                       
                        })
                },
                //送
                getSend(){
                    let query = {
                        user_id: this.user_id,
                        user_token: this.token,
                        type: 1,
                    };
                    return ajax2("GET", query, {}, "api/ThanksgivingDay/giftRank")
                        .then((res) => {
                            console.log(res);
                            this.pickupList=res.data.list
                            this.pickupMYList=res.data.my_rank_data
                       
                        })
                },
                //人气
                sentiment(){
                    let query = {
                        user_id: this.user_id,
                        user_token: this.token,

                    };
                    return ajax2("GET", query, {}, "api/ThanksgivingDay/popularRank")
                        .then((res) => {
                            console.log(res);
                            this.closList=res.data.list
                            this.closMYList=res.data.my_rank_data
                       
                        })
                },
                //活动信息
                activeInfo(){
                    let query = {
                        user_id: this.user_id,
                        user_token: this.token,

                    };
                    return ajax2("GET", query, {}, "api/ThanksgivingDay/getActData")
                        .then((res) => {
                            console.log(res);
                            this.leftTimer(res.data.djs)
                           
                       
                        })
                },
                //主页和礼物切换
                changeTab(num) {
                    // console.log(num);
                    this.tabT = num
                },
                // 收 送礼 人气 榜单切换
                changeTabs(num) {
                    this.tabTs = num
                },
                //判断礼物是否达标，开启弹窗
                giFl() { 
                    
                    if(this.numA==100 && this.numT==100){
                       this.isShow=true
                       console.log('成功');
                   }else{
                       console.log('失败');
                       return
                   }
                },
                //关闭弹窗
                closeTc(){
                    console.log(11);
                    this.isShow=false
                },
                   //倒计时
                   leftTimer: function (leftTime) {
                    var self = this;
                    var leftTime = leftTime
                    var Inter = setInterval(function () {
                        if (leftTime > 0) {
                            // console.log('q1aa')
                            //计算剩余的毫秒数
                            var days = parseInt(leftTime / 60 / 60 / 24, 10); //计算剩余的天数
                            var hours = parseInt(leftTime / 60 / 60 % 24, 10); //计算剩余的小时
                            var minutes = parseInt(leftTime / 60 % 60, 10); //计算剩余的分钟
                            var seconds = parseInt(leftTime % 60, 10); //计算剩余的秒数
                            hours = self.checkTime(hours);
                            minutes = self.checkTime(minutes);
                            seconds = self.checkTime(seconds);
                            self.time1 = days;
                            self.time2 = hours;
                            self.time3= minutes;
                            self.time6 = seconds;
                            // self.time1 = days;
                            // self.time2 = hours + ":" + minutes + ":" + seconds;
                            leftTime--;
                        } else {
                            self.time1 = '00';
                            self.time2 = '00';
                            self.time3 = '00';
                            self.time6 = '00';
                            // self.time1 = '0';
                            // self.time2 = '00:00:00';
                            clearInterval(Inter)
                        }
                    }, 1000);
                },
                checkTime: function (i) { //将0-9的数字前面加上0，例1变为01
                    if (i < 10) {
                        i = "0" + i;
                    }
                    return i;
                },
                num(number) {
                    var num = '';
                    if (number < 1000) {
                        num = number;
                    } else if (number >= 1000 && number < 1000000) {
                        var txt = (number / 1000).toFixed(3);
                        num = this.formatDecimal(txt, 1) + 'K';
                    } else if (number >= 1000000) {
                        var txt = (number / 1000000).toFixed(3);
                        num = this.formatDecimal(txt, 1) + 'M';
                    }
                    return num;
                },
            formatDecimal(num, decimal) {
                    // console.log(num)
                    num = num.toString();
                    var index = num.indexOf('.');
                    if (index !== -1) {
                        num = num.substring(0, decimal + index + 1);
                    } else {
                        num = num.substring(0);
                    }
                    return parseFloat(num).toFixed(decimal);
                },
            }
        })
    </script>
</body>

</html>